<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1763562" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon fa">&#xe6b6;</span>
                <div class="name">3x3</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6b5;</span>
                <div class="name">2x2</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6b4;</span>
                <div class="name">1x1</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6b3;</span>
                <div class="name">app</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6b2;</span>
                <div class="name">功率</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6af;</span>
                <div class="name">电池20%</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6b0;</span>
                <div class="name">电池60%</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6b1;</span>
                <div class="name">电池80%</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6ac;</span>
                <div class="name">电池100%</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6a5;</span>
                <div class="name">电池80%</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6a6;</span>
                <div class="name">电池60%</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6a7;</span>
                <div class="name">电池20%</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6a8;</span>
                <div class="name">电池40%</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6a9;</span>
                <div class="name">电池0%</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6aa;</span>
                <div class="name">电池100%</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6ad;</span>
                <div class="name">电池0%</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6ae;</span>
                <div class="name">电池40%</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6a3;</span>
                <div class="name">冷通道</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6a4;</span>
                <div class="name">热通道</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6a2;</span>
                <div class="name">除湿</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6a1;</span>
                <div class="name">制热</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6a0;</span>
                <div class="name">加湿2</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe68e;</span>
                <div class="name">负载率 0%</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe68f;</span>
                <div class="name">负载率 60%</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe690;</span>
                <div class="name">负载率 40%</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe691;</span>
                <div class="name">负载率 100%</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe692;</span>
                <div class="name">负载率 80%</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe693;</span>
                <div class="name">负载率 20%</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe69a;</span>
                <div class="name">温度计 60%</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe69b;</span>
                <div class="name">温度计 0%</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe69c;</span>
                <div class="name">温度计 40%</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe69d;</span>
                <div class="name">温度计 100%</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe69e;</span>
                <div class="name">温度计 20%</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe69f;</span>
                <div class="name">温度计 80%</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe694;</span>
                <div class="name">湿度计 0%</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe695;</span>
                <div class="name">湿度计 40%</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe696;</span>
                <div class="name">湿度计 80%</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe697;</span>
                <div class="name">湿度计 20%</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe698;</span>
                <div class="name">湿度计 100%</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe699;</span>
                <div class="name">湿度计 60%</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe68a;</span>
                <div class="name">报表分析</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe68b;</span>
                <div class="name">故障</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe68c;</span>
                <div class="name">电池自检</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe68d;</span>
                <div class="name">能耗管理</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe689;</span>
                <div class="name">play_arrow</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe688;</span>
                <div class="name">notifications_off</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe686;</span>
                <div class="name">logout</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe681;</span>
                <div class="name">fullscreen</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe67e;</span>
                <div class="name">camera</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe67f;</span>
                <div class="name">其他</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe680;</span>
                <div class="name">待机</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe682;</span>
                <div class="name">上电</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe683;</span>
                <div class="name">升压</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe684;</span>
                <div class="name">降压</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe685;</span>
                <div class="name">高效</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe687;</span>
                <div class="name">变频</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe67d;</span>
                <div class="name">ECO</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe67c;</span>
                <div class="name">删除 delete</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe67b;</span>
                <div class="name">修改 edit</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe67a;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe679;</span>
                <div class="name">圆</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe678;</span>
                <div class="name">电池模式</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe677;</span>
                <div class="name">电池模式</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe674;</span>
                <div class="name">门</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe673;</span>
                <div class="name">门 -关</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe672;</span>
                <div class="name">圆</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe671;</span>
                <div class="name">拓扑图</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe670;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe66f;</span>
                <div class="name">烟感</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe675;</span>
                <div class="name">烟感</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe676;</span>
                <div class="name">水浸</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe66e;</span>
                <div class="name">水浸</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe652;</span>
                <div class="name">尺寸等高 fa-same-height</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe653;</span>
                <div class="name">垂直等距 fa-vertical-distance</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe654;</span>
                <div class="name">水平等距 fa-horizontal-distance</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe655;</span>
                <div class="name">尺寸等宽 fa-same-width</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe656;</span>
                <div class="name">上一层 fa-upper-level</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe657;</span>
                <div class="name">置顶 fa-topping-level</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe658;</span>
                <div class="name">下一层 fa-next-level</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe659;</span>
                <div class="name">置底 fa-bottom-level</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe65a;</span>
                <div class="name">眼睛闭 fa-eye-slash</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe65b;</span>
                <div class="name">移动-左 fa-caret-square-o-left</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe65c;</span>
                <div class="name">眼睛开 fa-eye</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe65d;</span>
                <div class="name">移动-右 fa-caret-square-o-right</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe65e;</span>
                <div class="name">锁-闭 fa-lock</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe65f;</span>
                <div class="name">饼图 fa-pie-chart</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe660;</span>
                <div class="name">水滴 fa-tint</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe661;</span>
                <div class="name">摄像头 fa-video-camera</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe662;</span>
                <div class="name">锁-开 fa-unlock</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe663;</span>
                <div class="name">文本 fa-text-width</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe664;</span>
                <div class="name">IT fa-television</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe665;</span>
                <div class="name">图片 fa-file-image-o</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe666;</span>
                <div class="name">超链接 fa-link</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe667;</span>
                <div class="name">字体 fa-font</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe668;</span>
                <div class="name">曲线图 fa-area-chart</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe669;</span>
                <div class="name">图片 fa-picture-o</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe66a;</span>
                <div class="name">勾 fa-check</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe66b;</span>
                <div class="name">表格 fa-table</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe66c;</span>
                <div class="name">编辑 fa-pencil-square</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe66d;</span>
                <div class="name">仪表盘 fa-tachometer</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe651;</span>
                <div class="name">右对齐</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe650;</span>
                <div class="name">左对齐</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe64f;</span>
                <div class="name">下对齐</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe64d;</span>
                <div class="name">上对齐</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe64e;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe64c;</span>
                <div class="name">粘贴</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe64b;</span>
                <div class="name">复制</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe64a;</span>
                <div class="name">框选</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe649;</span>
                <div class="name">单选 fa-mouse-pointer</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe648;</span>
                <div class="name">设备</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe647;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe646;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe639;</span>
                <div class="name">下箭头</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe63b;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe63a;</span>
                <div class="name">上箭头</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe63c;</span>
                <div class="name">下箭头</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe645;</span>
                <div class="name">负载率-半</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe641;</span>
                <div class="name">风机-告警</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe640;</span>
                <div class="name">空调-告警</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe642;</span>
                <div class="name">旁路-告警</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe643;</span>
                <div class="name">输出-告警</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe63f;</span>
                <div class="name">电池-告警</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe63e;</span>
                <div class="name">市电-告警</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe633;</span>
                <div class="name">电池-告警</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe644;</span>
                <div class="name">雪花-告警</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe635;</span>
                <div class="name">雪花</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe634;</span>
                <div class="name">语言</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe63d;</span>
                <div class="name">负载率</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe628;</span>
                <div class="name">旁路</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe629;</span>
                <div class="name">湿度计 满载</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe62a;</span>
                <div class="name">温度计 满载</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe62b;</span>
                <div class="name">输出</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe62d;</span>
                <div class="name">湿度计</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe62e;</span>
                <div class="name">状态</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe62f;</span>
                <div class="name">电池</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe630;</span>
                <div class="name">温度计</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe631;</span>
                <div class="name">风机</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe636;</span>
                <div class="name">空调</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe6ab;</span>
                <div class="name">电池</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe624;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe626;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe627;</span>
                <div class="name">告警</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe618;</span>
                <div class="name">设备管理</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe619;</span>
                <div class="name">重启</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe61a;</span>
                <div class="name">退出</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe61b;</span>
                <div class="name">协议管理</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe61c;</span>
                <div class="name">IP设置</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe61d;</span>
                <div class="name">组态管理</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe61e;</span>
                <div class="name">账户权限</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe61f;</span>
                <div class="name">帮助</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe620;</span>
                <div class="name">数据管理</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe621;</span>
                <div class="name">告警联动</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe623;</span>
                <div class="name">关于</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe615;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe616;</span>
                <div class="name">接口管理</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe617;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe614;</span>
                <div class="name">完成</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe60f;</span>
                <div class="name">配电</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe610;</span>
                <div class="name">空调</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe611;</span>
                <div class="name">环境</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe612;</span>
                <div class="name">UPS</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe613;</span>
                <div class="name">门锁</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe60b;</span>
                <div class="name">历史告警分布</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe60c;</span>
                <div class="name">用户操作记录</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe60d;</span>
                <div class="name">历史告警记录</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe60e;</span>
                <div class="name">历史数据记录</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe608;</span>
                <div class="name">紧急</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe604;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe605;</span>
                <div class="name">上箭头</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon fa">&#xe606;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'fa';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#fa') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.fa {
  font-family: "fa" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="fa"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"fa" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon fa fa-3x3"></span>
            <div class="name">
              3x3
            </div>
            <div class="code-name">.fa-3x3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-2x2"></span>
            <div class="name">
              2x2
            </div>
            <div class="code-name">.fa-2x2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-1x1"></span>
            <div class="name">
              1x1
            </div>
            <div class="code-name">.fa-1x1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-app"></span>
            <div class="name">
              app
            </div>
            <div class="code-name">.fa-app
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-load"></span>
            <div class="name">
              功率
            </div>
            <div class="code-name">.fa-load
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-2-20"></span>
            <div class="name">
              电池20%
            </div>
            <div class="code-name">.fa-cell-2-20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-2-60"></span>
            <div class="name">
              电池60%
            </div>
            <div class="code-name">.fa-cell-2-60
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-2-80"></span>
            <div class="name">
              电池80%
            </div>
            <div class="code-name">.fa-cell-2-80
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-2-100"></span>
            <div class="name">
              电池100%
            </div>
            <div class="code-name">.fa-cell-2-100
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-80"></span>
            <div class="name">
              电池80%
            </div>
            <div class="code-name">.fa-cell-80
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-60"></span>
            <div class="name">
              电池60%
            </div>
            <div class="code-name">.fa-cell-60
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-20"></span>
            <div class="name">
              电池20%
            </div>
            <div class="code-name">.fa-cell-20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-40"></span>
            <div class="name">
              电池40%
            </div>
            <div class="code-name">.fa-cell-40
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-0"></span>
            <div class="name">
              电池0%
            </div>
            <div class="code-name">.fa-cell-0
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-100"></span>
            <div class="name">
              电池100%
            </div>
            <div class="code-name">.fa-cell-100
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-2-0"></span>
            <div class="name">
              电池0%
            </div>
            <div class="code-name">.fa-cell-2-0
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-2-40"></span>
            <div class="name">
              电池40%
            </div>
            <div class="code-name">.fa-cell-2-40
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cold-aisle"></span>
            <div class="name">
              冷通道
            </div>
            <div class="code-name">.fa-cold-aisle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-hot-aisle"></span>
            <div class="name">
              热通道
            </div>
            <div class="code-name">.fa-hot-aisle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-dry"></span>
            <div class="name">
              除湿
            </div>
            <div class="code-name">.fa-dry
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-heating"></span>
            <div class="name">
              制热
            </div>
            <div class="code-name">.fa-heating
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-moisture"></span>
            <div class="name">
              加湿2
            </div>
            <div class="code-name">.fa-moisture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-pie-0"></span>
            <div class="name">
              负载率 0%
            </div>
            <div class="code-name">.fa-pie-0
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-pie-60"></span>
            <div class="name">
              负载率 60%
            </div>
            <div class="code-name">.fa-pie-60
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-pie-40"></span>
            <div class="name">
              负载率 40%
            </div>
            <div class="code-name">.fa-pie-40
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-pie-100"></span>
            <div class="name">
              负载率 100%
            </div>
            <div class="code-name">.fa-pie-100
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-pie-80"></span>
            <div class="name">
              负载率 80%
            </div>
            <div class="code-name">.fa-pie-80
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-pie-20"></span>
            <div class="name">
              负载率 20%
            </div>
            <div class="code-name">.fa-pie-20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-humidity-60"></span>
            <div class="name">
              温度计 60%
            </div>
            <div class="code-name">.fa-humidity-60
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-humidity-0"></span>
            <div class="name">
              温度计 0%
            </div>
            <div class="code-name">.fa-humidity-0
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-humidity-40"></span>
            <div class="name">
              温度计 40%
            </div>
            <div class="code-name">.fa-humidity-40
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-humidity-100"></span>
            <div class="name">
              温度计 100%
            </div>
            <div class="code-name">.fa-humidity-100
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-humidity-20"></span>
            <div class="name">
              温度计 20%
            </div>
            <div class="code-name">.fa-humidity-20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-humidity-80"></span>
            <div class="name">
              温度计 80%
            </div>
            <div class="code-name">.fa-humidity-80
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-thermometer-0"></span>
            <div class="name">
              湿度计 0%
            </div>
            <div class="code-name">.fa-thermometer-0
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-thermometer-40"></span>
            <div class="name">
              湿度计 40%
            </div>
            <div class="code-name">.fa-thermometer-40
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-thermometer-80"></span>
            <div class="name">
              湿度计 80%
            </div>
            <div class="code-name">.fa-thermometer-80
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-thermometer-20"></span>
            <div class="name">
              湿度计 20%
            </div>
            <div class="code-name">.fa-thermometer-20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-thermometer-100"></span>
            <div class="name">
              湿度计 100%
            </div>
            <div class="code-name">.fa-thermometer-100
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-thermometer-60"></span>
            <div class="name">
              湿度计 60%
            </div>
            <div class="code-name">.fa-thermometer-60
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-event-note"></span>
            <div class="name">
              报表分析
            </div>
            <div class="code-name">.fa-event-note
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-fault"></span>
            <div class="name">
              故障
            </div>
            <div class="code-name">.fa-fault
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-test"></span>
            <div class="name">
              电池自检
            </div>
            <div class="code-name">.fa-cell-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-assessment"></span>
            <div class="name">
              能耗管理
            </div>
            <div class="code-name">.fa-assessment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-play-arrow"></span>
            <div class="name">
              play_arrow
            </div>
            <div class="code-name">.fa-play-arrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-bell-off"></span>
            <div class="name">
              notifications_off
            </div>
            <div class="code-name">.fa-bell-off
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-logout"></span>
            <div class="name">
              logout
            </div>
            <div class="code-name">.fa-logout
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-full-screen"></span>
            <div class="name">
              fullscreen
            </div>
            <div class="code-name">.fa-full-screen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-camera"></span>
            <div class="name">
              camera
            </div>
            <div class="code-name">.fa-camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-other"></span>
            <div class="name">
              其他
            </div>
            <div class="code-name">.fa-other
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-standby"></span>
            <div class="name">
              待机
            </div>
            <div class="code-name">.fa-standby
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-pwoer"></span>
            <div class="name">
              上电
            </div>
            <div class="code-name">.fa-pwoer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-on-booster"></span>
            <div class="name">
              升压
            </div>
            <div class="code-name">.fa-on-booster
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-on-reducer"></span>
            <div class="name">
              降压
            </div>
            <div class="code-name">.fa-on-reducer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-eco"></span>
            <div class="name">
              高效
            </div>
            <div class="code-name">.fa-eco
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-converter"></span>
            <div class="name">
              变频
            </div>
            <div class="code-name">.fa-converter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-ess"></span>
            <div class="name">
              ECO
            </div>
            <div class="code-name">.fa-ess
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-delete"></span>
            <div class="name">
              删除 delete
            </div>
            <div class="code-name">.fa-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-edit"></span>
            <div class="name">
              修改 edit
            </div>
            <div class="code-name">.fa-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.fa-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-circle"></span>
            <div class="name">
              圆
            </div>
            <div class="code-name">.fa-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-3-alarm"></span>
            <div class="name">
              电池模式
            </div>
            <div class="code-name">.fa-cell-3-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-3"></span>
            <div class="name">
              电池模式
            </div>
            <div class="code-name">.fa-cell-3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-door-alarm"></span>
            <div class="name">
              门
            </div>
            <div class="code-name">.fa-door-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-door"></span>
            <div class="name">
              门 -关
            </div>
            <div class="code-name">.fa-door
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-circle-2"></span>
            <div class="name">
              圆
            </div>
            <div class="code-name">.fa-circle-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-topology"></span>
            <div class="name">
              拓扑图
            </div>
            <div class="code-name">.fa-topology
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-modify"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.fa-modify
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-smoke"></span>
            <div class="name">
              烟感
            </div>
            <div class="code-name">.fa-smoke
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-smoke-alarm"></span>
            <div class="name">
              烟感
            </div>
            <div class="code-name">.fa-smoke-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-water-alarm"></span>
            <div class="name">
              水浸
            </div>
            <div class="code-name">.fa-water-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-water"></span>
            <div class="name">
              水浸
            </div>
            <div class="code-name">.fa-water
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-same-height"></span>
            <div class="name">
              尺寸等高 fa-same-height
            </div>
            <div class="code-name">.fa-same-height
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-vertical-distance"></span>
            <div class="name">
              垂直等距 fa-vertical-distance
            </div>
            <div class="code-name">.fa-vertical-distance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-horizontal-distance"></span>
            <div class="name">
              水平等距 fa-horizontal-distance
            </div>
            <div class="code-name">.fa-horizontal-distance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-same-width"></span>
            <div class="name">
              尺寸等宽 fa-same-width
            </div>
            <div class="code-name">.fa-same-width
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-upper-level"></span>
            <div class="name">
              上一层 fa-upper-level
            </div>
            <div class="code-name">.fa-upper-level
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-topping-level"></span>
            <div class="name">
              置顶 fa-topping-level
            </div>
            <div class="code-name">.fa-topping-level
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-next-level"></span>
            <div class="name">
              下一层 fa-next-level
            </div>
            <div class="code-name">.fa-next-level
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-bottom-level"></span>
            <div class="name">
              置底 fa-bottom-level
            </div>
            <div class="code-name">.fa-bottom-level
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-eye-slash"></span>
            <div class="name">
              眼睛闭 fa-eye-slash
            </div>
            <div class="code-name">.fa-eye-slash
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-caret-square-o-left"></span>
            <div class="name">
              移动-左 fa-caret-square-o-left
            </div>
            <div class="code-name">.fa-caret-square-o-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-eye"></span>
            <div class="name">
              眼睛开 fa-eye
            </div>
            <div class="code-name">.fa-eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-caret-square-o-right"></span>
            <div class="name">
              移动-右 fa-caret-square-o-right
            </div>
            <div class="code-name">.fa-caret-square-o-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-lock"></span>
            <div class="name">
              锁-闭 fa-lock
            </div>
            <div class="code-name">.fa-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-pie-chart"></span>
            <div class="name">
              饼图 fa-pie-chart
            </div>
            <div class="code-name">.fa-pie-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-tint"></span>
            <div class="name">
              水滴 fa-tint
            </div>
            <div class="code-name">.fa-tint
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-video-camera"></span>
            <div class="name">
              摄像头 fa-video-camera
            </div>
            <div class="code-name">.fa-video-camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-unlock-alt"></span>
            <div class="name">
              锁-开 fa-unlock
            </div>
            <div class="code-name">.fa-unlock-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-text-width"></span>
            <div class="name">
              文本 fa-text-width
            </div>
            <div class="code-name">.fa-text-width
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-television"></span>
            <div class="name">
              IT fa-television
            </div>
            <div class="code-name">.fa-television
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-file-image-o"></span>
            <div class="name">
              图片 fa-file-image-o
            </div>
            <div class="code-name">.fa-file-image-o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-link"></span>
            <div class="name">
              超链接 fa-link
            </div>
            <div class="code-name">.fa-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-font"></span>
            <div class="name">
              字体 fa-font
            </div>
            <div class="code-name">.fa-font
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-area-chart"></span>
            <div class="name">
              曲线图 fa-area-chart
            </div>
            <div class="code-name">.fa-area-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-photo"></span>
            <div class="name">
              图片 fa-picture-o
            </div>
            <div class="code-name">.fa-photo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-check"></span>
            <div class="name">
              勾 fa-check
            </div>
            <div class="code-name">.fa-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-table"></span>
            <div class="name">
              表格 fa-table
            </div>
            <div class="code-name">.fa-table
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-pencil-square-o"></span>
            <div class="name">
              编辑 fa-pencil-square
            </div>
            <div class="code-name">.fa-pencil-square-o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-tachometer"></span>
            <div class="name">
              仪表盘 fa-tachometer
            </div>
            <div class="code-name">.fa-tachometer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-align-right"></span>
            <div class="name">
              右对齐
            </div>
            <div class="code-name">.fa-align-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-align-left"></span>
            <div class="name">
              左对齐
            </div>
            <div class="code-name">.fa-align-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-align-down"></span>
            <div class="name">
              下对齐
            </div>
            <div class="code-name">.fa-align-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-align-up"></span>
            <div class="name">
              上对齐
            </div>
            <div class="code-name">.fa-align-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-trash"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.fa-trash
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-clipboard"></span>
            <div class="name">
              粘贴
            </div>
            <div class="code-name">.fa-clipboard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-files-o"></span>
            <div class="name">
              复制
            </div>
            <div class="code-name">.fa-files-o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-window-restore"></span>
            <div class="name">
              框选
            </div>
            <div class="code-name">.fa-window-restore
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-mouse-pointer"></span>
            <div class="name">
              单选 fa-mouse-pointer
            </div>
            <div class="code-name">.fa-mouse-pointer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-th-large"></span>
            <div class="name">
              设备
            </div>
            <div class="code-name">.fa-th-large
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-chevron-right"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.fa-chevron-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-chevron-left"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.fa-chevron-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-chevron-down"></span>
            <div class="name">
              下箭头
            </div>
            <div class="code-name">.fa-chevron-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-arrow-right"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.fa-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-arrow-up"></span>
            <div class="name">
              上箭头
            </div>
            <div class="code-name">.fa-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-arrow-down"></span>
            <div class="name">
              下箭头
            </div>
            <div class="code-name">.fa-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-pie"></span>
            <div class="name">
              负载率-半
            </div>
            <div class="code-name">.fa-pie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-fan-alarm"></span>
            <div class="name">
              风机-告警
            </div>
            <div class="code-name">.fa-fan-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-ac-alarm"></span>
            <div class="name">
              空调-告警
            </div>
            <div class="code-name">.fa-ac-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-by-pass-alarm"></span>
            <div class="name">
              旁路-告警
            </div>
            <div class="code-name">.fa-by-pass-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-socket-alarm"></span>
            <div class="name">
              输出-告警
            </div>
            <div class="code-name">.fa-socket-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-alarm"></span>
            <div class="name">
              电池-告警
            </div>
            <div class="code-name">.fa-cell-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-gene-alarm"></span>
            <div class="name">
              市电-告警
            </div>
            <div class="code-name">.fa-gene-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-2-alarm"></span>
            <div class="name">
              电池-告警
            </div>
            <div class="code-name">.fa-cell-2-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-snow-alarm"></span>
            <div class="name">
              雪花-告警
            </div>
            <div class="code-name">.fa-snow-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-snow"></span>
            <div class="name">
              雪花
            </div>
            <div class="code-name">.fa-snow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-language"></span>
            <div class="name">
              语言
            </div>
            <div class="code-name">.fa-language
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-pie-alarm"></span>
            <div class="name">
              负载率
            </div>
            <div class="code-name">.fa-pie-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-by-pass"></span>
            <div class="name">
              旁路
            </div>
            <div class="code-name">.fa-by-pass
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-thermometer-alarm"></span>
            <div class="name">
              湿度计 满载
            </div>
            <div class="code-name">.fa-thermometer-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-humidity-alarm"></span>
            <div class="name">
              温度计 满载
            </div>
            <div class="code-name">.fa-humidity-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-socket"></span>
            <div class="name">
              输出
            </div>
            <div class="code-name">.fa-socket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-thermometer"></span>
            <div class="name">
              湿度计
            </div>
            <div class="code-name">.fa-thermometer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-gene"></span>
            <div class="name">
              状态
            </div>
            <div class="code-name">.fa-gene
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell"></span>
            <div class="name">
              电池
            </div>
            <div class="code-name">.fa-cell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-humidity"></span>
            <div class="name">
              温度计
            </div>
            <div class="code-name">.fa-humidity
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-fan"></span>
            <div class="name">
              风机
            </div>
            <div class="code-name">.fa-fan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-ac"></span>
            <div class="name">
              空调
            </div>
            <div class="code-name">.fa-ac
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cell-2"></span>
            <div class="name">
              电池
            </div>
            <div class="code-name">.fa-cell-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-home"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.fa-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cog"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.fa-cog
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-bell"></span>
            <div class="name">
              告警
            </div>
            <div class="code-name">.fa-bell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-wrench"></span>
            <div class="name">
              设备管理
            </div>
            <div class="code-name">.fa-wrench
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-reboot"></span>
            <div class="name">
              重启
            </div>
            <div class="code-name">.fa-reboot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-sign-out"></span>
            <div class="name">
              退出
            </div>
            <div class="code-name">.fa-sign-out
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-cogs"></span>
            <div class="name">
              协议管理
            </div>
            <div class="code-name">.fa-cogs
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-rss"></span>
            <div class="name">
              IP设置
            </div>
            <div class="code-name">.fa-rss
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-configure"></span>
            <div class="name">
              组态管理
            </div>
            <div class="code-name">.fa-configure
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-user-2"></span>
            <div class="name">
              账户权限
            </div>
            <div class="code-name">.fa-user-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-help"></span>
            <div class="name">
              帮助
            </div>
            <div class="code-name">.fa-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-data"></span>
            <div class="name">
              数据管理
            </div>
            <div class="code-name">.fa-data
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-bullhorn"></span>
            <div class="name">
              告警联动
            </div>
            <div class="code-name">.fa-bullhorn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-exclamation"></span>
            <div class="name">
              关于
            </div>
            <div class="code-name">.fa-exclamation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-key"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.fa-key
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-interface"></span>
            <div class="name">
              接口管理
            </div>
            <div class="code-name">.fa-interface
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-history"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.fa-history
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-succeed"></span>
            <div class="name">
              完成
            </div>
            <div class="code-name">.fa-succeed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-bolt"></span>
            <div class="name">
              配电
            </div>
            <div class="code-name">.fa-bolt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-snowflake-o"></span>
            <div class="name">
              空调
            </div>
            <div class="code-name">.fa-snowflake-o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-environment"></span>
            <div class="name">
              环境
            </div>
            <div class="code-name">.fa-environment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-ups"></span>
            <div class="name">
              UPS
            </div>
            <div class="code-name">.fa-ups
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-columns"></span>
            <div class="name">
              门锁
            </div>
            <div class="code-name">.fa-columns
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-charts"></span>
            <div class="name">
              历史告警分布
            </div>
            <div class="code-name">.fa-charts
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-user"></span>
            <div class="name">
              用户操作记录
            </div>
            <div class="code-name">.fa-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-list"></span>
            <div class="name">
              历史告警记录
            </div>
            <div class="code-name">.fa-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-history-data"></span>
            <div class="name">
              历史数据记录
            </div>
            <div class="code-name">.fa-history-data
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-bell-2"></span>
            <div class="name">
              紧急
            </div>
            <div class="code-name">.fa-bell-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-times"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.fa-times
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-chevron-up"></span>
            <div class="name">
              上箭头
            </div>
            <div class="code-name">.fa-chevron-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon fa fa-arrow-left"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.fa-arrow-left
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="fa fa-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            fa" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-3x3"></use>
                </svg>
                <div class="name">3x3</div>
                <div class="code-name">#fa-3x3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-2x2"></use>
                </svg>
                <div class="name">2x2</div>
                <div class="code-name">#fa-2x2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-1x1"></use>
                </svg>
                <div class="name">1x1</div>
                <div class="code-name">#fa-1x1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-app"></use>
                </svg>
                <div class="name">app</div>
                <div class="code-name">#fa-app</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-load"></use>
                </svg>
                <div class="name">功率</div>
                <div class="code-name">#fa-load</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-2-20"></use>
                </svg>
                <div class="name">电池20%</div>
                <div class="code-name">#fa-cell-2-20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-2-60"></use>
                </svg>
                <div class="name">电池60%</div>
                <div class="code-name">#fa-cell-2-60</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-2-80"></use>
                </svg>
                <div class="name">电池80%</div>
                <div class="code-name">#fa-cell-2-80</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-2-100"></use>
                </svg>
                <div class="name">电池100%</div>
                <div class="code-name">#fa-cell-2-100</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-80"></use>
                </svg>
                <div class="name">电池80%</div>
                <div class="code-name">#fa-cell-80</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-60"></use>
                </svg>
                <div class="name">电池60%</div>
                <div class="code-name">#fa-cell-60</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-20"></use>
                </svg>
                <div class="name">电池20%</div>
                <div class="code-name">#fa-cell-20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-40"></use>
                </svg>
                <div class="name">电池40%</div>
                <div class="code-name">#fa-cell-40</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-0"></use>
                </svg>
                <div class="name">电池0%</div>
                <div class="code-name">#fa-cell-0</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-100"></use>
                </svg>
                <div class="name">电池100%</div>
                <div class="code-name">#fa-cell-100</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-2-0"></use>
                </svg>
                <div class="name">电池0%</div>
                <div class="code-name">#fa-cell-2-0</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-2-40"></use>
                </svg>
                <div class="name">电池40%</div>
                <div class="code-name">#fa-cell-2-40</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cold-aisle"></use>
                </svg>
                <div class="name">冷通道</div>
                <div class="code-name">#fa-cold-aisle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-hot-aisle"></use>
                </svg>
                <div class="name">热通道</div>
                <div class="code-name">#fa-hot-aisle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-dry"></use>
                </svg>
                <div class="name">除湿</div>
                <div class="code-name">#fa-dry</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-heating"></use>
                </svg>
                <div class="name">制热</div>
                <div class="code-name">#fa-heating</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-moisture"></use>
                </svg>
                <div class="name">加湿2</div>
                <div class="code-name">#fa-moisture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-pie-0"></use>
                </svg>
                <div class="name">负载率 0%</div>
                <div class="code-name">#fa-pie-0</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-pie-60"></use>
                </svg>
                <div class="name">负载率 60%</div>
                <div class="code-name">#fa-pie-60</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-pie-40"></use>
                </svg>
                <div class="name">负载率 40%</div>
                <div class="code-name">#fa-pie-40</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-pie-100"></use>
                </svg>
                <div class="name">负载率 100%</div>
                <div class="code-name">#fa-pie-100</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-pie-80"></use>
                </svg>
                <div class="name">负载率 80%</div>
                <div class="code-name">#fa-pie-80</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-pie-20"></use>
                </svg>
                <div class="name">负载率 20%</div>
                <div class="code-name">#fa-pie-20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-humidity-60"></use>
                </svg>
                <div class="name">温度计 60%</div>
                <div class="code-name">#fa-humidity-60</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-humidity-0"></use>
                </svg>
                <div class="name">温度计 0%</div>
                <div class="code-name">#fa-humidity-0</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-humidity-40"></use>
                </svg>
                <div class="name">温度计 40%</div>
                <div class="code-name">#fa-humidity-40</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-humidity-100"></use>
                </svg>
                <div class="name">温度计 100%</div>
                <div class="code-name">#fa-humidity-100</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-humidity-20"></use>
                </svg>
                <div class="name">温度计 20%</div>
                <div class="code-name">#fa-humidity-20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-humidity-80"></use>
                </svg>
                <div class="name">温度计 80%</div>
                <div class="code-name">#fa-humidity-80</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-thermometer-0"></use>
                </svg>
                <div class="name">湿度计 0%</div>
                <div class="code-name">#fa-thermometer-0</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-thermometer-40"></use>
                </svg>
                <div class="name">湿度计 40%</div>
                <div class="code-name">#fa-thermometer-40</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-thermometer-80"></use>
                </svg>
                <div class="name">湿度计 80%</div>
                <div class="code-name">#fa-thermometer-80</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-thermometer-20"></use>
                </svg>
                <div class="name">湿度计 20%</div>
                <div class="code-name">#fa-thermometer-20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-thermometer-100"></use>
                </svg>
                <div class="name">湿度计 100%</div>
                <div class="code-name">#fa-thermometer-100</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-thermometer-60"></use>
                </svg>
                <div class="name">湿度计 60%</div>
                <div class="code-name">#fa-thermometer-60</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-event-note"></use>
                </svg>
                <div class="name">报表分析</div>
                <div class="code-name">#fa-event-note</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-fault"></use>
                </svg>
                <div class="name">故障</div>
                <div class="code-name">#fa-fault</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-test"></use>
                </svg>
                <div class="name">电池自检</div>
                <div class="code-name">#fa-cell-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-assessment"></use>
                </svg>
                <div class="name">能耗管理</div>
                <div class="code-name">#fa-assessment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-play-arrow"></use>
                </svg>
                <div class="name">play_arrow</div>
                <div class="code-name">#fa-play-arrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-bell-off"></use>
                </svg>
                <div class="name">notifications_off</div>
                <div class="code-name">#fa-bell-off</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-logout"></use>
                </svg>
                <div class="name">logout</div>
                <div class="code-name">#fa-logout</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-full-screen"></use>
                </svg>
                <div class="name">fullscreen</div>
                <div class="code-name">#fa-full-screen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-camera"></use>
                </svg>
                <div class="name">camera</div>
                <div class="code-name">#fa-camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-other"></use>
                </svg>
                <div class="name">其他</div>
                <div class="code-name">#fa-other</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-standby"></use>
                </svg>
                <div class="name">待机</div>
                <div class="code-name">#fa-standby</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-pwoer"></use>
                </svg>
                <div class="name">上电</div>
                <div class="code-name">#fa-pwoer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-on-booster"></use>
                </svg>
                <div class="name">升压</div>
                <div class="code-name">#fa-on-booster</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-on-reducer"></use>
                </svg>
                <div class="name">降压</div>
                <div class="code-name">#fa-on-reducer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-eco"></use>
                </svg>
                <div class="name">高效</div>
                <div class="code-name">#fa-eco</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-converter"></use>
                </svg>
                <div class="name">变频</div>
                <div class="code-name">#fa-converter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-ess"></use>
                </svg>
                <div class="name">ECO</div>
                <div class="code-name">#fa-ess</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-delete"></use>
                </svg>
                <div class="name">删除 delete</div>
                <div class="code-name">#fa-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-edit"></use>
                </svg>
                <div class="name">修改 edit</div>
                <div class="code-name">#fa-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#fa-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-circle"></use>
                </svg>
                <div class="name">圆</div>
                <div class="code-name">#fa-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-3-alarm"></use>
                </svg>
                <div class="name">电池模式</div>
                <div class="code-name">#fa-cell-3-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-3"></use>
                </svg>
                <div class="name">电池模式</div>
                <div class="code-name">#fa-cell-3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-door-alarm"></use>
                </svg>
                <div class="name">门</div>
                <div class="code-name">#fa-door-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-door"></use>
                </svg>
                <div class="name">门 -关</div>
                <div class="code-name">#fa-door</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-circle-2"></use>
                </svg>
                <div class="name">圆</div>
                <div class="code-name">#fa-circle-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-topology"></use>
                </svg>
                <div class="name">拓扑图</div>
                <div class="code-name">#fa-topology</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-modify"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#fa-modify</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-smoke"></use>
                </svg>
                <div class="name">烟感</div>
                <div class="code-name">#fa-smoke</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-smoke-alarm"></use>
                </svg>
                <div class="name">烟感</div>
                <div class="code-name">#fa-smoke-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-water-alarm"></use>
                </svg>
                <div class="name">水浸</div>
                <div class="code-name">#fa-water-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-water"></use>
                </svg>
                <div class="name">水浸</div>
                <div class="code-name">#fa-water</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-same-height"></use>
                </svg>
                <div class="name">尺寸等高 fa-same-height</div>
                <div class="code-name">#fa-same-height</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-vertical-distance"></use>
                </svg>
                <div class="name">垂直等距 fa-vertical-distance</div>
                <div class="code-name">#fa-vertical-distance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-horizontal-distance"></use>
                </svg>
                <div class="name">水平等距 fa-horizontal-distance</div>
                <div class="code-name">#fa-horizontal-distance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-same-width"></use>
                </svg>
                <div class="name">尺寸等宽 fa-same-width</div>
                <div class="code-name">#fa-same-width</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-upper-level"></use>
                </svg>
                <div class="name">上一层 fa-upper-level</div>
                <div class="code-name">#fa-upper-level</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-topping-level"></use>
                </svg>
                <div class="name">置顶 fa-topping-level</div>
                <div class="code-name">#fa-topping-level</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-next-level"></use>
                </svg>
                <div class="name">下一层 fa-next-level</div>
                <div class="code-name">#fa-next-level</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-bottom-level"></use>
                </svg>
                <div class="name">置底 fa-bottom-level</div>
                <div class="code-name">#fa-bottom-level</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-eye-slash"></use>
                </svg>
                <div class="name">眼睛闭 fa-eye-slash</div>
                <div class="code-name">#fa-eye-slash</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-caret-square-o-left"></use>
                </svg>
                <div class="name">移动-左 fa-caret-square-o-left</div>
                <div class="code-name">#fa-caret-square-o-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-eye"></use>
                </svg>
                <div class="name">眼睛开 fa-eye</div>
                <div class="code-name">#fa-eye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-caret-square-o-right"></use>
                </svg>
                <div class="name">移动-右 fa-caret-square-o-right</div>
                <div class="code-name">#fa-caret-square-o-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-lock"></use>
                </svg>
                <div class="name">锁-闭 fa-lock</div>
                <div class="code-name">#fa-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-pie-chart"></use>
                </svg>
                <div class="name">饼图 fa-pie-chart</div>
                <div class="code-name">#fa-pie-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-tint"></use>
                </svg>
                <div class="name">水滴 fa-tint</div>
                <div class="code-name">#fa-tint</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-video-camera"></use>
                </svg>
                <div class="name">摄像头 fa-video-camera</div>
                <div class="code-name">#fa-video-camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-unlock-alt"></use>
                </svg>
                <div class="name">锁-开 fa-unlock</div>
                <div class="code-name">#fa-unlock-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-text-width"></use>
                </svg>
                <div class="name">文本 fa-text-width</div>
                <div class="code-name">#fa-text-width</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-television"></use>
                </svg>
                <div class="name">IT fa-television</div>
                <div class="code-name">#fa-television</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-file-image-o"></use>
                </svg>
                <div class="name">图片 fa-file-image-o</div>
                <div class="code-name">#fa-file-image-o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-link"></use>
                </svg>
                <div class="name">超链接 fa-link</div>
                <div class="code-name">#fa-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-font"></use>
                </svg>
                <div class="name">字体 fa-font</div>
                <div class="code-name">#fa-font</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-area-chart"></use>
                </svg>
                <div class="name">曲线图 fa-area-chart</div>
                <div class="code-name">#fa-area-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-photo"></use>
                </svg>
                <div class="name">图片 fa-picture-o</div>
                <div class="code-name">#fa-photo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-check"></use>
                </svg>
                <div class="name">勾 fa-check</div>
                <div class="code-name">#fa-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-table"></use>
                </svg>
                <div class="name">表格 fa-table</div>
                <div class="code-name">#fa-table</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-pencil-square-o"></use>
                </svg>
                <div class="name">编辑 fa-pencil-square</div>
                <div class="code-name">#fa-pencil-square-o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-tachometer"></use>
                </svg>
                <div class="name">仪表盘 fa-tachometer</div>
                <div class="code-name">#fa-tachometer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-align-right"></use>
                </svg>
                <div class="name">右对齐</div>
                <div class="code-name">#fa-align-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-align-left"></use>
                </svg>
                <div class="name">左对齐</div>
                <div class="code-name">#fa-align-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-align-down"></use>
                </svg>
                <div class="name">下对齐</div>
                <div class="code-name">#fa-align-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-align-up"></use>
                </svg>
                <div class="name">上对齐</div>
                <div class="code-name">#fa-align-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-trash"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#fa-trash</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-clipboard"></use>
                </svg>
                <div class="name">粘贴</div>
                <div class="code-name">#fa-clipboard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-files-o"></use>
                </svg>
                <div class="name">复制</div>
                <div class="code-name">#fa-files-o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-window-restore"></use>
                </svg>
                <div class="name">框选</div>
                <div class="code-name">#fa-window-restore</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-mouse-pointer"></use>
                </svg>
                <div class="name">单选 fa-mouse-pointer</div>
                <div class="code-name">#fa-mouse-pointer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-th-large"></use>
                </svg>
                <div class="name">设备</div>
                <div class="code-name">#fa-th-large</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-chevron-right"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#fa-chevron-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-chevron-left"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#fa-chevron-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-chevron-down"></use>
                </svg>
                <div class="name">下箭头</div>
                <div class="code-name">#fa-chevron-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-arrow-right"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#fa-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-arrow-up"></use>
                </svg>
                <div class="name">上箭头</div>
                <div class="code-name">#fa-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-arrow-down"></use>
                </svg>
                <div class="name">下箭头</div>
                <div class="code-name">#fa-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-pie"></use>
                </svg>
                <div class="name">负载率-半</div>
                <div class="code-name">#fa-pie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-fan-alarm"></use>
                </svg>
                <div class="name">风机-告警</div>
                <div class="code-name">#fa-fan-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-ac-alarm"></use>
                </svg>
                <div class="name">空调-告警</div>
                <div class="code-name">#fa-ac-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-by-pass-alarm"></use>
                </svg>
                <div class="name">旁路-告警</div>
                <div class="code-name">#fa-by-pass-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-socket-alarm"></use>
                </svg>
                <div class="name">输出-告警</div>
                <div class="code-name">#fa-socket-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-alarm"></use>
                </svg>
                <div class="name">电池-告警</div>
                <div class="code-name">#fa-cell-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-gene-alarm"></use>
                </svg>
                <div class="name">市电-告警</div>
                <div class="code-name">#fa-gene-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-2-alarm"></use>
                </svg>
                <div class="name">电池-告警</div>
                <div class="code-name">#fa-cell-2-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-snow-alarm"></use>
                </svg>
                <div class="name">雪花-告警</div>
                <div class="code-name">#fa-snow-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-snow"></use>
                </svg>
                <div class="name">雪花</div>
                <div class="code-name">#fa-snow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-language"></use>
                </svg>
                <div class="name">语言</div>
                <div class="code-name">#fa-language</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-pie-alarm"></use>
                </svg>
                <div class="name">负载率</div>
                <div class="code-name">#fa-pie-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-by-pass"></use>
                </svg>
                <div class="name">旁路</div>
                <div class="code-name">#fa-by-pass</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-thermometer-alarm"></use>
                </svg>
                <div class="name">湿度计 满载</div>
                <div class="code-name">#fa-thermometer-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-humidity-alarm"></use>
                </svg>
                <div class="name">温度计 满载</div>
                <div class="code-name">#fa-humidity-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-socket"></use>
                </svg>
                <div class="name">输出</div>
                <div class="code-name">#fa-socket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-thermometer"></use>
                </svg>
                <div class="name">湿度计</div>
                <div class="code-name">#fa-thermometer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-gene"></use>
                </svg>
                <div class="name">状态</div>
                <div class="code-name">#fa-gene</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell"></use>
                </svg>
                <div class="name">电池</div>
                <div class="code-name">#fa-cell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-humidity"></use>
                </svg>
                <div class="name">温度计</div>
                <div class="code-name">#fa-humidity</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-fan"></use>
                </svg>
                <div class="name">风机</div>
                <div class="code-name">#fa-fan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-ac"></use>
                </svg>
                <div class="name">空调</div>
                <div class="code-name">#fa-ac</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cell-2"></use>
                </svg>
                <div class="name">电池</div>
                <div class="code-name">#fa-cell-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-home"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#fa-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cog"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#fa-cog</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-bell"></use>
                </svg>
                <div class="name">告警</div>
                <div class="code-name">#fa-bell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-wrench"></use>
                </svg>
                <div class="name">设备管理</div>
                <div class="code-name">#fa-wrench</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-reboot"></use>
                </svg>
                <div class="name">重启</div>
                <div class="code-name">#fa-reboot</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-sign-out"></use>
                </svg>
                <div class="name">退出</div>
                <div class="code-name">#fa-sign-out</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-cogs"></use>
                </svg>
                <div class="name">协议管理</div>
                <div class="code-name">#fa-cogs</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-rss"></use>
                </svg>
                <div class="name">IP设置</div>
                <div class="code-name">#fa-rss</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-configure"></use>
                </svg>
                <div class="name">组态管理</div>
                <div class="code-name">#fa-configure</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-user-2"></use>
                </svg>
                <div class="name">账户权限</div>
                <div class="code-name">#fa-user-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-help"></use>
                </svg>
                <div class="name">帮助</div>
                <div class="code-name">#fa-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-data"></use>
                </svg>
                <div class="name">数据管理</div>
                <div class="code-name">#fa-data</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-bullhorn"></use>
                </svg>
                <div class="name">告警联动</div>
                <div class="code-name">#fa-bullhorn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-exclamation"></use>
                </svg>
                <div class="name">关于</div>
                <div class="code-name">#fa-exclamation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-key"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#fa-key</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-interface"></use>
                </svg>
                <div class="name">接口管理</div>
                <div class="code-name">#fa-interface</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-history"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#fa-history</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-succeed"></use>
                </svg>
                <div class="name">完成</div>
                <div class="code-name">#fa-succeed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-bolt"></use>
                </svg>
                <div class="name">配电</div>
                <div class="code-name">#fa-bolt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-snowflake-o"></use>
                </svg>
                <div class="name">空调</div>
                <div class="code-name">#fa-snowflake-o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-environment"></use>
                </svg>
                <div class="name">环境</div>
                <div class="code-name">#fa-environment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-ups"></use>
                </svg>
                <div class="name">UPS</div>
                <div class="code-name">#fa-ups</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-columns"></use>
                </svg>
                <div class="name">门锁</div>
                <div class="code-name">#fa-columns</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-charts"></use>
                </svg>
                <div class="name">历史告警分布</div>
                <div class="code-name">#fa-charts</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-user"></use>
                </svg>
                <div class="name">用户操作记录</div>
                <div class="code-name">#fa-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-list"></use>
                </svg>
                <div class="name">历史告警记录</div>
                <div class="code-name">#fa-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-history-data"></use>
                </svg>
                <div class="name">历史数据记录</div>
                <div class="code-name">#fa-history-data</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-bell-2"></use>
                </svg>
                <div class="name">紧急</div>
                <div class="code-name">#fa-bell-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-times"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#fa-times</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-chevron-up"></use>
                </svg>
                <div class="name">上箭头</div>
                <div class="code-name">#fa-chevron-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#fa-arrow-left"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#fa-arrow-left</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
